<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--sweetalert2-->
   <!-- <link href="../dist/sweetalert2.min.css" rel="stylesheet">-->   <!--默认主题-->

    <!--css使用  bootstrap主题-->
    <link href="../dist/bootstrap-4.css" rel="stylesheet">

  <!--  <link href="../dark.css" rel="stylesheet">-->         <!--暗黑主题-->

    <script src="../dist/sweetalert2.min.js" type="text/javascript"></script>
</head>
<body>

<script>
    const inputOptions = new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                '#ff0000': 'Red',
                '#00ff00': 'Green',
                '#0000ff': 'Blue'
            })
        }, 1000)
    })


   async function fn(){
        const { value: color } = await Swal.fire({
            title: 'Select color',
            input: 'radio',
            inputOptions: inputOptions,
            inputValidator: (value) => {
                if (!value) {
                    return 'You need to choose something!'
                }
            }
        })

        if (color) {
            Swal.fire({ html: `You selected: ${color}` })
        }
    }

    fn()

</script>

</body>
</html>